<template>
  <div>
    <a-card :bordered="false" class="mb10 searchCard">

      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">

            <a-col :md="6" :sm="12">
              <a-form-item label="账号">
                <!--<a-input placeholder="请输入账号查询" v-model="queryParam.username"></a-input>-->
                <j-input placeholder="输入账号模糊查询" v-model="queryParam.account"></j-input>
              </a-form-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              </span>
            </a-col>

          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-card :bordered="false" style="margin-top: 10px">
      <!-- 操作按钮区域 -->
      <div class="table-operator" style="border-top: 5px; margin-bottom: 10px">
        <a-button type="primary" @click="ukeyForm()">Ukey初始化</a-button>
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <a-menu slot="overlay" @click="handleMenuClick">
            <a-menu-item key="1">
              <a-icon type="delete" @click="batchDel"/>
              删除
            </a-menu-item>
          </a-menu>
          <a-button style="margin-left: 8px">
            批量操作
            <a-icon type="down"/>
          </a-button>
        </a-dropdown>
      </div>

      <!-- table区域-begin -->
      <div>
        <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
          <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项&nbsp;&nbsp;
          <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        </div>

        <a-table
          ref="table"
          bordered
          rowKey="serverIaguid"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
          @change="handleTableChange">

          <span slot="action" slot-scope="text, record">
            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.serverIaguid)">
              <a>删除</a>
            </a-popconfirm>
            <!--<a @click="handleDelete(record.serverIaguid)">删除</a>-->
          </span>


        </a-table>
      </div>
      <ukey-form ref="ukeyForm" @ok="modalFormOk"></ukey-form>
    </a-card>
  </div>
</template>

<script>
  import {KsListMixin} from '@/mixins/KsListMixin'
  import JInput from '@/components/ksource/JInput'
  import UkeyForm from './modules/UkeyModal'

  export default {
    name: "UKeyList",
    mixins: [KsListMixin],
    components: {
      JInput,
      UkeyForm
    },
    data() {
      return {
        description: 'Ukey管理页面',
        FormViewModel: false,
        queryParam: {},
        columns: [
          {
            title: '用户账号',
            dataIndex: 'account',
            width: 80
          },
          {
            title: 'PIN码',
            width: 120,
            dataIndex: 'serverIaguid'
          },
          {
            title: '应用地址',
            width: 120,
            dataIndex: 'appUrl'
          },
          {
            title: 'key使用说明',
            width: 150,
            dataIndex: 'instruction'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            scopedSlots: {customRender: 'action'},
            width: 80
          }

        ],
        url: {
          list: "/platform/system/ukey/list",
          delete: "/platform/system/ukey/delKey",
          deleteBatch: "/platform/system/ukey/deleteBatch",
        },
      }
    },
    methods: {
        handleMenuClick(e) {
            if (e.key == 1) {
              this.batchDel();
            }
        },
        ukeyForm: function () {
            this.$refs.ukeyForm.view();
        },
    }

  }
</script>
